<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .arrbox {
      width: 100%;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background-color: orange;
    }
  </style>
</head>

<body>
  <div id="app">
    <img src="" :alt="message">
    <div class="arrbox">{{array[index]}}</div>
    <button @click="change">change</button>
  </div>
  <script src="../../javascript//vue.js"></script>
  <script>
    /*
    v-bind
    缩写：:
    预期：any (with argument) | Object (without argument)
    参数：attrOrProp (optional)
    修饰符：
      .prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
      .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
      .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
    用法：
      动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
      在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
      在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
      没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。 
     */
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          message: "图片已经损坏",
          array: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日",],
          index: 0
        }
      },
      methods: {
        change() {
          this.index++
          if (this.index >= this.array.length) {
            this.index = 0
          }
        }
      }
    })
  </script>
</body>

</html>